export default {
  methods: {
    // 点击header，切换body折叠状态
    handleSlideToggle () {
      this.localIsSlideUp = !this.localIsSlideUp
      this.$emit('update:isSlideUp', this.localIsSlideUp)
      this.$emit('slide', this.localIsSlideUp)
    },
    // tool
    // 动画函数
    performAnimation (isSlideUp) {
      let bodyDiv = this.$refs.body
      let baseSpeed = 2

      // 动画函数
      const slideAnimation = (speed, end) => {
        // bodyDiv.style.height = bodyDiv.offsetHeight + speed + 'px'
        this.bodyStyle = {
          height: bodyDiv.offsetHeight + speed + 'px'
        }

        if ((bodyDiv.offsetHeight + speed - end) * speed <= 0) {
          let _speed = speed > 0 ? speed + 8 : speed - 8

          this.animationId = window.requestAnimationFrame(() => slideAnimation(_speed, end))
        } else {
          if (speed > 0) this.bodyStyle = { height: 'auto' }
          else this.bodyStyle = { height: 0 }
        }
      }

      // 取消上次的动画
      window.cancelAnimationFrame(this.animationId)

      if (!isSlideUp) {
        let realHeight = 0

        // 展开
        if (['none'].includes(this.animationType)) {
          // bodyDiv.style.height = 'auto'
          this.bodyStyle = {
            height: 'auto'
          }
          return false
        }

        bodyDiv.style.height = 'auto'
        realHeight = bodyDiv.offsetHeight
        bodyDiv.style.height = '0'

        // 动画
        window.requestAnimationFrame(() => slideAnimation(baseSpeed, realHeight))
      } else {
        // 关闭
        if (['single', 'none'].includes(this.animationType)) {
          // bodyDiv.style.height = '0'
          this.bodyStyle = {
            height: '0'
          }
          return false
        }

        // 动画
        window.requestAnimationFrame(() => slideAnimation(-baseSpeed, 0))
      }
    },
    slideUp () {
      if (this.localIsSlideUp) return
      this.localIsSlideUp = true
      this.$emit('update:isSlideUp', true)
      this.$emit('slide', true)
    }
  }
}
